<template>
  <tui-navigation-bar
    :isOpacity="false"
    @init="initNavigation"
    @change="opacityChange"
    :isFixed="true"
    :scrollTop="scrollTop"
    title=""
    backgroundColor="rgba(181, 247, 230, 1)"
    color="#333"
  >
    <view class="navigation-bar-title"> 即时互联网医院 </view>
  </tui-navigation-bar>

  <view class="container">
    <view :style="heightStyle"></view>
    <uni-easyinput
      prefixIcon="search"
      v-model="search"
      placeholder="搜索医生名称/科室"
    ></uni-easyinput>
    <view style="height: 16rpx"></view>
    <image style="width: 100%; height: 296rpx" src="@/static/01.png" />
    <view style="height: 32rpx"></view>
    <my-card></my-card>
    <view style="height: 32rpx"></view>
    <my-consultation></my-consultation>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import useNavBar from './hooks/nav-bar.js'
const { initNavigation, opacityChange, scrollTop, height } = useNavBar()

const search = ref('')

const heightStyle = computed(() => ({
  height: height.value + 16 + 'px',
}))

</script>

<style lang="scss">
.navigation-bar-title {
  padding: 18rpx 0 18rpx 30rpx;
  font-size: 32rpx;
  box-sizing: border-box;
}
.content {
  padding: 0 30rpx;
}
</style>
